<template>
  <!-- 音乐播放器 组件 -->
  <div class="music-player" :style="lock ? 'bottom: 0;' : ''">
    <div class="lock" @click="lock = !lock">
      <img v-show="!lock" src="../../assets/svg/unlock.svg" alt="" />
      <img v-show="lock" src="../../assets/svg/lock.svg" alt="" />
    </div>
    <!-- 播放器的核心内容 -->
    <ul class="controls">
      <!-- 唱片 -->
      <li class="song-disc">
        <img
          :class="music_setout[m_idx].isPlay ? 'Rotate' : ''"
          src="../../assets/index/disc-black.jpg"
          alt=""
        />
      </li>
      <!-- 上一首 -->
      <li title="上一首" @click.stop="prev">
        <svg
          class="prev"
          title="上一首"
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          data-v-029747aa=""
        >
          <path
            fill="currentColor"
            d="M685.248 104.704a64 64 0 0 1 0 90.496L368.448 512l316.8 316.8a64 64 0 0 1-90.496 90.496L232.704 557.248a64 64 0 0 1 0-90.496l362.048-362.048a64 64 0 0 1 90.496 0z"
          ></path>
        </svg>
      </li>
      <!-- 播放器 -->
      <li
        class="song-player"
        :title="`${music_setout[m_idx].name}-${music_setout[m_idx].author}`"
      >
        <audio
          :autoplay="!firstState"
          controls
          class="aud"
          :src="music_setout[m_idx].src"
          @ended="endedHandler"
          @durationchange="durationChangeHandler"
          @play="play(music_setout[m_idx].musicId)"
          @pause="pause(music_setout[m_idx].musicId)"
          ref="aud"
        ></audio>
      </li>
      <!-- 移动端暂停/播放 -->
      <li class="pause_play">
        <a
          @click.prevent="play_pause_mobile(music_setout[m_idx].musicId)"
          :class="
            music_setout[m_idx].isPlay
              ? 'el-icon-video-pause'
              : 'el-icon-video-play'
          "
        ></a>
      </li>
      <!-- 下一首 -->
      <li title="下一首" @click="next">
        <svg
          class="next"
          title="下一首"
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          data-v-029747aa=""
        >
          <path
            fill="currentColor"
            d="M338.752 104.704a64 64 0 0 0 0 90.496l316.8 316.8-316.8 316.8a64 64 0 0 0 90.496 90.496l362.048-362.048a64 64 0 0 0 0-90.496L429.248 104.704a64 64 0 0 0-90.496 0z"
          ></path>
        </svg>
      </li>
      <!-- 当前播放音乐的信息 -->
      <li class="song-info">
        <span
          :title="`${music_setout[m_idx].name}-${music_setout[m_idx].author}`"
          v-text="music_setout[m_idx].name"
        ></span>
      </li>
      <!-- 打开播放列表 -->
      <li
        class="player-list"
        title="播放列表"
        @click="
          TOASTOPERA({
            toastShow: true,
            toastData: music_setout,
            title: '播放列表',
          })
        "
      >
        <img src="../../assets/index/player_list.png" alt="" />
      </li>
      <!-- 当前播放音乐的封面 -->
      <li class="music-cover" title="遇见音乐欢迎您">
        <img
          src="http://t14.baidu.com/it/u=2143203507,3633493468&fm=224&app=112&f=JPEG?w=408&h=500"
          :alt="music_setout[m_idx].name"
        />
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "MusicPlayer",
  computed: {
    /* 获取播放列表中的数据 */
    ...mapGetters("music", ["music_setout"]),
    /* 是否第一次进入页面 */
    ...mapState("music", ["m_idx", "firstState"]),
  },
  data() {
    return {
      lock: true,
    };
  },
  methods: {
    /* 播放、暂停、弹出层操作、更新播放音乐的索引、获取音乐播放总时长等方法 */
    ...mapMutations("music", [
      "PLAY",
      "PAUSE",
      "TOASTOPERA",
      "CHANGEMUSICIDX",
      "GETMUSICDURATION",
    ]),
    /* 音乐播放完成 1秒后切换下一首 */
    endedHandler() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.next();
      }, 1000);
    },
    /* 获取音乐总时长 */
    durationChangeHandler(e) {
      this.GETMUSICDURATION(e["target"]["duration"]);
    },
    /* 上一首 */
    prev() {
      if (this.m_idx <= 0) {
        this.CHANGEMUSICIDX(this.music_setout.length - 1);
      } else {
        let tmp = this.m_idx - 1;
        this.CHANGEMUSICIDX(tmp);
      }
    },
    /* 下一首 */
    next() {
      if (this.m_idx >= this.music_setout.length - 1) {
        this.CHANGEMUSICIDX(0);
      } else {
        let tmp = this.m_idx + 1;
        this.CHANGEMUSICIDX(tmp);
      }
    },
    /* 播放音乐 */
    play(musicId) {
      const aud = this.$refs["aud"];
      this.PLAY(musicId);
      this.isplay = true;
      aud.play();
    },
    /* 暂停音乐 */
    pause(musicId) {
      const aud = this.$refs["aud"];
      this.PAUSE(musicId);
      this.isplay = false;
      aud.pause();
    },
    /* 移动端播放暂停操作 */
    play_pause_mobile(musicId) {
      const aud = this.$refs["aud"];
      if (this.isplay) {
        aud.pause();
        this.pause(musicId);
      } else {
        aud.play();
        this.play(musicId);
      }
    },
  },
};
</script>

<style lang="less" scoped>
@keyframes Rotate {
  from {
    transform: rotateZ(0);
  }

  to {
    transform: rotateZ(360deg);
  }
}
.music-player {
  position: fixed;
  width: 100%;
  background: hsl(219, 39%, 13%); /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    hsla(212, 40%, 24%, 0.7),
    hsla(219, 41%, 13%, 0.7)
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    hsla(212, 40%, 24%, 0.7),
    hsla(219, 41%, 13%, 0.7)
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  height: 1.5rem;
  left: 0;
  bottom: -1.3rem;
  // bottom: 0;
  transition: all 0.5s;
  z-index: 999;
  &:hover {
    bottom: 0;
  }

  .lock {
    background: inherit;
    position: absolute;
    height: 0.5rem;
    width: 0.5rem;
    left: 0.35rem;
    top: -0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
    img {
      height: 60%;
      width: 60%;
    }
  }
  .controls {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    .pause_play {
      display: none;
    }
    .prev,
    .next {
      height: 0.5rem;
      width: 0.5rem;
      cursor: pointer;
      &:hover {
        color: #ffcff1;
      }
    }
  }
  .song-disc {
    margin-right: 0.5rem;
    width: 1rem;
    height: 1rem;
    overflow: hidden;
    border-radius: 50%;
    img {
      height: 100%;
      width: 100%;
      // transition: all 0.5s;
      &.Rotate {
        animation: Rotate infinite linear 3s;
      }
    }
  }
  .player-list {
    height: 0.5rem;
    width: 0.5rem;
    margin-left: 0.3rem;
    cursor: pointer;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .song-info {
    margin-left: 0.5rem;
    width: 1rem;
    span {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
    }
  }
  .music-cover {
    width: 1rem;
    height: 1rem;
    overflow: hidden;
    border-radius: 0.1rem;
    margin-left: 0.5rem;
    cursor: pointer;
    img {
      height: 100%;
      width: 100%;
    }
  }
}
@media screen and (max-width: 768px) {
  .music-player {
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.908);
    .lock {
      display: none !important;
    }
    .controls {
      .song-player {
        display: none;
      }
      .pause_play {
        display: block;
        font-size: 1rem;
        margin: 0 0.3rem;
      }
    }
  }
}
</style>